<template>
  <div class="box">
    <div class="header">
      <van-nav-bar title="购物车" left-arrow @click-left="$router.back()" />
    </div>
    <div class="content">
   <van-swipe-cell v-for="item in store.cartList" :key="item.id">
  <van-card
 
    :num="item.count"
    :price="item.price"
  
    :title="item.title"
   
    :thumb="item.image"
  >
  <template #tag>
   <van-checkbox v-model="item.checked"></van-checkbox>
  </template>
  <template #footer>
   <van-stepper v-model="item.count" />
  </template>
  </van-card>
  <template #right>
    <van-button square text="删除" type="danger" class="delete-button" style="height:100%;" @click="deleteItem(item.id)"/>
  </template>
</van-swipe-cell>
<van-skeleton >
  <template #template>
    <div :style="{ display: 'flex', width: '100%' }">
      <van-skeleton-image />
      <div :style="{ flex: 1, marginLeft: '16px' }">
        <van-skeleton-paragraph row-width="60%" />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
        <van-skeleton-paragraph />
      </div>
    </div>
  </template>
</van-skeleton>
    </div>
    <van-submit-bar :price="store.totalPrice*100" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="allChecked">全选</van-checkbox>
  
</van-submit-bar>


  </div>
</template>

<script setup >
import { useCounterStore } from "@/stores/counter";
import {computed} from 'vue'
const store = useCounterStore();
const deleteItem=(id)=>{
    store.delItem(id)
}


const allChecked=computed({
    get(){
        if(store.cartList.length==0)
        {
            return false
        }else{
            return store.cartList.every(item=>item.checked==true)
        }
    },
    set(newValue){
        store.cartList.forEach(item=>item.checked=newValue)
    }
})

</script>

<style lang="scss" scoped>
.van-submit-bar{
    bottom: 50px;
}
</style>